import { PageContainer } from '@ant-design/pro-layout';
import TbaleExplainMap from '@/components/TipsMap';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Menu, Space, Tag, message, Breadcrumb } from 'antd';
import React, { useRef } from 'react';
import request from 'umi-request';
import { Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import styles from './index.less';

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: '序号',
    // valueType: 'indexBorder',
    width: 80,
  },
  {
    title: '研究方向',
    align: 'center',
    key: '研究方向',
    dataIndex: '研究方向',
    copyable: true,
    ellipsis: true,
  },
  {
    title: '研究内容',
    align: 'center',
    key: '研究内容',
    dataIndex: '研究内容',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '可向社会提供的服务特色',
    align: 'center',
    key: '可向社会提供的服务特色',
    dataIndex: '可向社会提供的服务特色',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
];
const dataSource = [
  {
    序号: 1,
    研究方向: '电工装备可靠性理论与失效机理',
    研究内容:
      '针对电工装备在多能源电网运行状态下的可靠性建模与预测关键科学技术问题，开展电工装备零部件及系统失效演化机理与建模、可靠性分析与设计、运行状态监测与评价等基础研究，为提高电网运行可靠运行奠定理论基础。',
    可向社会提供的服务特色:
      '电工装备在复杂运行条件下性能退化规律和损伤累积效应，失效分布规律；电工装备剩余寿命预测和可靠性评价。',
  },
  {
    序号: 2,
    研究方向: '电工装备电磁综合效应',
    研究内容:
      '开展电磁基础建模与计算、新型电磁系统设计、电磁综合效应分析、复杂电磁环境下电工装备电磁干扰机理及其可靠性新方法研究，为开发高可靠、低能耗的电工装备提供理论支撑。',
    可向社会提供的服务特色:
      '电磁场数值计算，电磁装置特性的建模方法及电磁环境模拟分析。',
  },
  {
    序号: 3,
    研究方向: '先进电工材料微结构与性能调控',
    研究内容:
      '从新型电工材料的结构与性能调控方法、功能材料构效关系、应用基础理论和关键器件技术方面开展研究。',
    可向社会提供的服务特色:
      '半导体材料的外延生长和电力电子器件工艺技术；建立新型电工材料理论基础和材料特性数据库。',
  },
  {
    序号: 4,
    研究方向: '电工装备状态感知与智能控制',
    研究内容:
      '围绕智能电网中电工装备智能运行与控制的基础科学问题开展研究，通过智能传感与量测、高效驱动与智能控制、新能源电网与电力电子系统控制等的基础研究与应用基础研究，为实现电工装备高效运行和智能化奠定基础。',
    可向社会提供的服务特色:
      '特种高端智能传感量测技术和信号处理，设计高转矩密度、小转矩脉动新型电机系统。',
  },
];

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        dataSource={dataSource}
        rowKey="序号"
        search={{
          labelWidth: 'auto',
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          } else {
            return null;
          }
        }}
        pagination={{
          pageSize: 10,
          // onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="方向列表"
        toolBarRender={() => [
          <ModalForm<{
            name: string;
            company: string;
          }>
            title="新建方向"
            trigger={
              <Button type="primary">
                <PlusOutlined />
                新建方向
              </Button>
            }
            autoFocusFirstInput
            modalProps={{
              onCancel: () => console.log('run'),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
              await waitTime(2000);
              console.log(values.name);
              message.success('提交成功');
              return true;
            }}
          >
            <ProForm.Group>
              <ProFormText
                width="md"
                name="name"
                label="签约客户名称"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
              />

              <ProFormText
                width="md"
                name="company"
                label="我方公司名称"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width="md"
                name="contract"
                label="合同名称"
                placeholder="请输入名称"
              />
              <ProFormDateRangePicker
                name="contractTime"
                label="合同生效时间"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormSelect
                request={async () => [
                  {
                    value: 'chapter',
                    label: '盖章后生效',
                  },
                ]}
                width="xs"
                name="useMode"
                label="合同约定生效方式"
              />
              <ProFormSelect
                width="xs"
                options={[
                  {
                    value: 'time',
                    label: '履行完终止',
                  },
                ]}
                name="unusedMode"
                label="合同约定失效效方式"
              />
            </ProForm.Group>
            <ProFormText width="sm" name="id" label="主合同编号" />
            <ProFormText
              name="project"
              disabled
              label="项目名称"
              initialValue="xxxx项目"
            />
            <ProFormText
              width="xs"
              name="mangerName"
              disabled
              label="商务经理"
              initialValue="启途"
            />
          </ModalForm>,
        ]}
      />
    </PageContainer>
  );
};
